<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href = "../css/bootstrap.min.css">
    <script type="application/javascript" src="../js/jquery-1.9.0.min.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <title>胶囊标签+面板fade</title>
    <style>
        #pan4{
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .embed-responsive-item{
            width: 100%;
            height: 100%;

        }
    </style>
    <script language="JavaScript">
        $(function(){
            // 跳转面板
            $('.nav a').click(function (e){
                e.preventDefault();
                $(this).tab('show')
            });
        $('#show2').click(function (){
            $('#cgui').tab('show');
            });
        // 获取当前标签名
        $('a[data-toggle="tab"]').on('shown.bs.tab',function (e){
            var newobj = e.target.innerHTML;
            $('#testshow').html(newobj);
        });
        });

    </script>
</head>
<body>
    <div class="container">

        <ul class="nav nav-pills">
            <li><a href="#pan1" data-toggle="tab">搜索</a></li>
            <li><a href="#pan2" data-toggle="tab">常规</a></li>
            <li><a href="#pan3" data-toggle="tab" id="cgui">数据</a></li>
            <li><a href="#pan4" data-toggle="tab">iframe</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="pan1">
                <div class="panel panel-default">
                    <div class="panel-heading">搜索标题</div>
                    <div class="panel-body">
                        搜索内容.......
                    </div>
                </div>
            </div>
            <div class="tab-pane fade in" id="pan2">
                <div class="panel panel-default">
                    <div class="panel-body">
                        常规内容。。。。。。。。
                    </div>
                    <div class="panel-footer">常规注脚</div>
                </div>
            </div>
            <div class="tab-pane fade in" id="pan3">
                <div class="panel panel-default">
                    <div class="panel-heading">数据标题</div>
                    <table class="table">
                        <tr>
                            <th>Name</th>
                            <th>Sex</th>
                            <th>Age</th>
                            <th>School</th>
                        </tr>
                        <tr>
                            <td>AA</td>
                            <td>M</td>
                            <td>18</td>
                            <td>ABC</td>
                        </tr>
                        <tr>
                            <td>AA</td>
                            <td>M</td>
                            <td>18</td>
                            <td>ABC</td>
                        </tr>
                        <tr>
                            <td>AA</td>
                            <td>M</td>
                            <td>18</td>
                            <td>ABC</td>
                        </tr>


                    </table>
                </div>
            </div>
            <div class="tab-pane" id="pan4">
                <div class="panel panel-default">
                        <iframe class="embed-responsive-item" src="../picture/demo02.html"></iframe>
                </div>
            </div>
        </div>
        <button type="button" id="show2">跳转数据</button>
    </div>
    <h1 id="testshow">标识</h1>
</body>
</html>